// src/viewpage/information.tsx
import React from 'react';
import { type UserInfoProps } from './types';
import backIcon from '../../src/assets/back.svg';
import searchIcon from '../../src/assets/search.svg';

const blankAvatar = '';

const Information: React.FC<UserInfoProps> = ({
  userProfile,
  followInfo,
  isCurrentUser,
  onFollow,
  onFollowCountClick,
  onFollowerCountClick,
  onBack,
  onSearchClick
}) => {
  const processAvatarUrl = (avatar: string | undefined): string => {
    if (!avatar || avatar === 'null' || avatar === 'undefined' || avatar === '' || avatar === 'default') {
      return blankAvatar;
    }
    if (avatar.startsWith('http')) {
      return avatar;
    }
    return avatar.startsWith('/') 
      ? `http://218.244.141.86:8080${avatar}`
      : `http://218.244.141.86:8080/${avatar}`;
  };

  return (
    <>
      <div style={{ 
        display: 'flex', 
        justifyContent: 'space-between', 
        alignItems: 'center', 
        marginBottom: '40px'
      }}>
        <button
          onClick={onBack}
          style={{
            background: 'linear-gradient(135deg, rgba(240,224,208,0.8) 0%, rgba(232,208,184,0.8) 100%)',
            border: 'none',
            cursor: 'pointer',
            padding: '8px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: '40px',
            height: '40px',
            borderRadius: '12px',
            boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
            backdropFilter: 'blur(10px)'
          }}
        >
          <img src={backIcon} alt="返回" style={{ 
            width: '24px', 
            height: '24px',
            filter: 'invert(30%) sepia(20%) saturate(500%) hue-rotate(350deg) brightness(90%) contrast(90%)'
          }} />
        </button>

        <button
          onClick={onSearchClick}
          style={{ 
            display: 'flex', 
            alignItems: 'center', 
            justifyContent: 'center',
            width: '40px',
            height: '40px',
            background: 'linear-gradient(135deg, rgba(240,224,208,0.8) 0%, rgba(232,208,184,0.8) 100%)',
            borderRadius: '12px',
            boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
            cursor: 'pointer',
            backdropFilter: 'blur(10px)',
            border: 'none'
          }}
        >
          <img src={searchIcon} alt="搜索" style={{ 
            width: '20px', 
            height: '20px',
            filter: 'invert(30%) sepia(20%) saturate(500%) hue-rotate(350deg) brightness(90%) contrast(90%)'
          }} />
        </button>
      </div>

      <div style={{ 
        display: 'flex', 
        flexDirection: 'column', 
        alignItems: 'center', 
        marginBottom: '50px'
      }}>
        <div style={{
          position: 'relative',
          padding: '8px',
          background: 'linear-gradient(135deg, rgba(240,224,208,0.8) 0%, rgba(232,208,184,0.8) 100%)',
          borderRadius: '50%',
          boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
          marginBottom: '20px',
          backdropFilter: 'blur(10px)'
        }}>
          <img
            src={processAvatarUrl(userProfile.avatar)}
            alt="用户头像"
            style={{ 
              borderRadius: '50%', 
              width: '140px', 
              height: '140px',
              border: '4px solid white',
              objectFit: 'cover'
            }}
            onError={(e) => {
              const target = e.target as HTMLImageElement;
              target.src = blankAvatar;
            }}
          />
        </div>
        
        <div style={{ 
          textAlign: 'center',
          marginBottom: '25px'
        }}>
          <h2 style={{ 
            margin: '0 0 12px 0', 
            fontSize: '32px', 
            fontWeight: 'bold',
            background: 'linear-gradient(135deg, #8B4513 0%, #A0522D 100%)',
            backgroundClip: 'text',
            WebkitBackgroundClip: 'text',
            color: 'transparent'
          }}>
            {userProfile.nickname}
            {isCurrentUser && (
              <span style={{ 
                fontSize: '18px', 
                color: '#8B7D6B', 
                marginLeft: '8px',
                fontWeight: 'normal'
              }}>
                (我)
              </span>
            )}
          </h2>
          <p style={{ 
            margin: '0', 
            color: '#8B7D6B', 
            fontSize: '16px',
            padding: '8px 16px',
            backgroundColor: 'rgba(255,255,255,0.6)',
            borderRadius: '20px',
            backdropFilter: 'blur(10px)'
          }}>
            @{userProfile.id}
          </p>
        </div>

        <div style={{ 
          display: 'flex', 
          alignItems: 'center', 
          gap: '40px',
          padding: '25px 40px',
          backgroundColor: 'rgba(255,255,255,0.7)',
          borderRadius: '20px',
          backdropFilter: 'blur(10px)',
          boxShadow: '0 8px 32px rgba(0,0,0,0.1)'
        }}>
          {[
            { 
              count: followInfo.followCount, 
              label: '关注',
              clickable: isCurrentUser,
              onClick: onFollowCountClick
            },
            { 
              count: followInfo.followerCount, 
              label: '粉丝',
              clickable: isCurrentUser,
              onClick: onFollowerCountClick
            },
            { 
              count: userProfile.recipeCount || 0, 
              label: '菜谱',
              clickable: false
            }
          ].map((item, index) => (
            <div 
              key={index} 
              style={{ 
                textAlign: 'center',
                cursor: item.clickable ? 'pointer' : 'default'
              }}
              onClick={item.clickable ? item.onClick : undefined}
            >
              <div style={{ 
                fontSize: '20px', 
                fontWeight: 'bold',
                background: 'linear-gradient(135deg, #8B4513 0%, #A0522D 100%)',
                backgroundClip: 'text',
                WebkitBackgroundClip: 'text',
                color: 'transparent',
                marginBottom: '4px'
              }}>
                {item.count}
              </div>
              <div style={{ 
                fontSize: '14px', 
                color: item.clickable ? '#8B4513' : '#8B7D6B'
              }}>
                {item.label}
              </div>
            </div>
          ))}
          
          {/* 关注按钮 - 如果不是当前用户才显示 */}
          {!isCurrentUser && (
            <button
              onClick={onFollow}
              style={{
                background: followInfo.isFollowing 
                  ? 'linear-gradient(135deg, rgba(139, 69, 19, 0.8) 0%, rgba(160, 82, 45, 0.8) 100%)'
                  : 'linear-gradient(135deg, rgba(240,224,208,0.8) 0%, rgba(232,208,184,0.8) 100%)',
                border: 'none',
                borderRadius: '25px',
                padding: '12px 28px',
                fontSize: '16px',
                fontWeight: 'bold',
                cursor: 'pointer',
                marginLeft: '20px',
                color: followInfo.isFollowing ? '#fff' : '#8B4513',
                boxShadow: '0 4px 15px rgba(0,0,0,0.1)',
                backdropFilter: 'blur(10px)'
              }}
            >
              {followInfo.isFollowing ? '已关注' : '关注'}
            </button>
          )}
        </div>
      </div>
    </>
  );
};

export default Information;